<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>信息管理系统</title>
    <div th:replace="common/link::header"></div>
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/login.css}" media="all">
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>用户登录</h2>
            <p>维保平台软件v1.0</p>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
                <input type="text" name="userName" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
                <input type="password" name="passWord" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"></label>
                        <input type="text" name="code" lay-verify="required" placeholder="图形验证码" class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <img id="codeImg" class="layadmin-user-login-codeimg">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" style="margin-bottom: 20px;">
                <input type="checkbox" name="remember-me" lay-skin="primary" title="记住密码">
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登 录</button>
            </div>
        </div>
    </div>

</div>
<div th:replace="common/script::footer"></div>
<script th:inline="javascript">
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'user'], function(){
        let $ = layui.$,
            form = layui.form;
        // 初始化
        getImgCode();
        form.render();
        //提交
        form.on('submit(login)', function(obj) {
            // 打开loading
            let loading = layer.load(0, {
                shade: false,
                time: 2 * 1000
            });
            // 禁止重复点击按钮
            $('.layui-btn').attr("disabled",true);
            //请求登入接口
            $.ajax({
                type: 'POST',
                url:  ctx + '/login',
                data: obj.field,
                dataType: 'json',
                success: function(result) {
                    if (result.code === 200) {
                        layer.msg('登录成功', {
                             icon: 1
                            ,time: 1000
                        }, function(){
                            window.location.href = '/';
                        });
                    } else {
                        layer.msg(result.message);
                        // 刷新验证码
                        getImgCode();
                        // 关闭loading
                        layer.close(loading);
                        // 开启点击事件
                        $('.layui-btn').attr("disabled", false);
                    }
                }
            });
        });
        $("#codeImg").on('click', function() {
            // 添加验证码
            getImgCode();
        });
        $(document).keydown(function (e) {
            if (e.keyCode === 13) {
                $('.layui-btn').click();
            }
        });
        // 解决session过期跳转到登录页并跳出iframe框架
        $(document).ready(function () {
            if (window != top) {
                top.location.href = location.href;
            }
        });
    });
    /**
     * 获取验证码
     */
    function getImgCode() {
        let url = ctx + '/getImgCode';
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = "blob";
        xhr.onload = function() {
            if (this.status === 200) {
                let blob = this.response;
                document.getElementById("codeImg").src = window.URL.createObjectURL(blob);
            }
        }
        xhr.send();
    }
</script>
</body>
</html>